<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色添加</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript"
	src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<!-- 导入ztree类库 -->
<link rel="stylesheet" href="../../js/ztree/zTreeStyle.css"
	type="text/css" />
<script src="../../js/ztree/jquery.ztree.all-3.5.js"
	type="text/javascript"></script>
<script type="text/javascript">
	function loadData(menuData) {
        var thisURL = document.URL;
        var  arr =thisURL.split('?idKey=');
        if (arr.length > 1) {
            var id = arr[1]
			$.getJSON(
			    "../../roleAction_findById.action?id=" + id,
				function (json) {
			        console.log(json)
                    $("#roleForm").form("load", json)
					var permissions = json.permissions
                    for (var i = 0; i < permissions.length; i++) {
			            var pid = permissions[i].id
						$("#" + pid).prop("checked", true)
                    }
                    // 授权树初始化
                    var setting = {
                        data : {
                            key : {
                                title : "t"
                            },
                            simpleData : {
                                enable : true
                            }
                        },
                        check : {
                            enable : true,
                        }
                    };
                    var treeObj = $("#menuTree");
                    $.fn.zTree.init(treeObj, setting, menuData);
                    zTree_Menu = $.fn.zTree.getZTreeObj("menuTree");
                    var menus = json.menus
                    for (var i = 0; i < menus.length; i++) {
                        var mid = menus[i].id
                        var node = zTree_Menu.getNodeByParam("id",mid, null);
                        var parentNode = node.getParentNode();
                        if (parentNode == null) {
                            continue;
						}
                        zTree_Menu.checkNode(parentNode, true)
                        zTree_Menu.checkNode(node, true)
                        zTree_Menu.expandNode(node, true, true, true);
                        zTree_Menu.selectNode(node);		// 选中
                    }
                    zTree_Menu.cancelSelectedNode()
                }
			)
		}
    }
	$(function() {
		// 授权树初始化
		var setting = {
			data : {
				key : {
					title : "t"
				},
				simpleData : {
					enable : true
				}
			},
			check : {
				enable : true,
			}
		};

		$.ajax({
			url : '../../menuAction_findLevelOne.action',
			type : 'POST',
			dataType : 'text',
			success : function(data) {
				var zNodes = eval("(" + data + ")");
				$.fn.zTree.init($("#menuTree"), setting, zNodes);
				// 回显树数据！！！！！！！！！
				loadData(zNodes)
			},
			error : function(msg) {
                alert('树加载异常!');
			}
		});

        // 点击保存
		$('#save').click(function() {
			if ($("#roleForm").form("validate")) {

				var treeObj = $.fn.zTree.getZTreeObj("menuTree");
				// true:获取被勾选的节点组成的集合
				// false :获取未被勾选的节点组成的集合
				var nodes = treeObj.getCheckedNodes(true);
				// 拼接菜单的ID组成的字符串
				var arr = new Array();
				for (var i = 0; i < nodes.length; i++) {
					arr.push(nodes[i].id);
				}
				// 为隐藏域赋值
				var ids = arr.toString();
				$("#menuIds").val(ids);
				// 提交表单
				$("#roleForm").submit()
			}
		});
	});
</script>
</head>

<body class="easyui-layout">
	<div region="north" style="height: 31px; overflow: hidden;"
		split="false" border="false">
		<div class="datagrid-toolbar">
			<a id="save" icon="icon-save" href="#" class="easyui-linkbutton"
				plain="true">保存</a>
		</div>
	</div>
	<div region="center" style="overflow: auto; padding: 5px;"
		border="false">
		<form id="roleForm" method="post"
			action="../../roleAction_save.action">
			<!-- 隐藏域,用来封装用户选择的菜单的id -->
			<input type="hidden" name="id" id="roleID">
			<input type="hidden" name="menuIds" id="menuIds">
			<table class="table-edit" width="80%" align="center">
				<tr class="title">
					<td colspan="2">角色信息</td>
				</tr>
				<tr>
					<td>名称</td>
					<td>
						<input type="text" name="name" class="easyui-validatebox"
							data-options="required:true" />
					</td>
				</tr>
				<tr>
					<td>关键字</td>
					<td>
						<input type="text" name="keyword" class="easyui-validatebox"
							data-options="required:true" />
					</td>
				</tr>
				<tr>
					<td>描述</td>
					<td>
						<textarea name="description" rows="4" cols="60"></textarea>
					</td>
				</tr>
				<tr>
					<td>权限选择</td>
					<td id="permissionTd"></td>
				</tr>
				<tr>
					<td>菜单授权</td>
					<td>
						<ul id="menuTree" class="ztree"></ul>
					</td>
				</tr>
			</table>
		</form>
	</div>

	<script type="text/javascript">
		$(function() {
			$
					.post(
							"../../permissionAction_findAll.action",
							function(data) {

								for (var i = 0; i < data.length; i++) {
									var id = data[i].id;
									var name = data[i].name;
									$("#permissionTd")
											.append(
													'<input id="'+id+'" type="checkbox" name="permissionIds" value="'+id+'" /><label for="'+id+'">'
															+ name + '</label>')
								}

							})
		})
	</script>
</body>

</html>